import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCommonStore = defineStore(
  'common',
  () => {
    // 菜单选中项 的key
    const menuKey = ref(['home'])
    // 菜单展开项的 kye（menuKey 的父菜单的 key）
    const subKeys = ref(['home'])
    // 顶部切换标签
    const slideList = ref([])

    // 顶部面包屑
    const breadcrumb = ref([])
    const setMenuKey = (key, subKey) => {
      menuKey.value = key
      subKeys.value = subKey
    }

    // 设置顶部导航标签
    const setSlideList = (title) => {
      const bool = slideList.value.some((item) => item.title === title)
      if (bool) return
      // 判断是否包含当前的菜单项
      slideList.value.push({
        id: menuKey.value[0],
        key: menuKey.value,
        subKey: subKeys.value,
        title,
      })
    }

    // 删除顶部导航标签项
    const delSlide = (index) => {
      slideList.value.splice(index, 1)
    }

    // 设置面包屑
    const setBreadcrumb = (arr) => {
      const list = []
      arr.forEach((item) => {
        list.push(item.meta.title)
      })
      breadcrumb.value = list
    }

    // 重置Comm
    const resetCommon = () => {
      menuKey.value = []
      subKeys.value = []
      slideList.value = []
      breadcrumb.value = []
    }
    return {
      menuKey,
      subKeys,
      slideList,
      breadcrumb,
      setMenuKey,
      setSlideList,
      delSlide,
      setBreadcrumb,
      resetCommon,
    }
  },
  {
    persist: true,
  },
)
